#state_GameCreateState{
  .container .content{
    @include S(padding, 20px);
  }

  .group{
    // background: #eeeff5;
    @include S(margin-bottom, 20px);

    .title{
      display: flex;
      align-items: center;

      h2{
        @include SuperHeading;
      }
      span{
        @include S(padding-left, 5px);
        @include PlainText;
        flex: 1;
      }
    }

    .options{
      @include S(padding-top, 15px);
      
      button{
        border: unset;
        box-shadow: unset;
        background: #eeeff5;
        color: #888;
        @include S(margin-right, 10px);
        @include S(margin-bottom, 8px);
        transition: background-color .12s ease-in-out;

        &::after{
          content: unset;
        }
      }

      button.active{
        background: $colorBlueBright;
        color: white;
      }
    }

    .description{
      @include PlainText;
      color: #888;
      @include S(margin-top, 10px);
      background: #eeeff5;
      @include S(padding, 20px);
      @include S(border-radius, $globalBorderRadius);
    }

    &.createGame{
      display: flex;
      justify-content: flex-end;

      button{
        padding: 5px 20px;
      }
    }
  }
}